<template>
  <div class="container">
    <el-form
      :model="formContent"
      ref="loginform"
      status-icon
      :rules="rules"
    >
      <!-- 登陆图片 -->
      <div class="imgContainer">
        <el-image
          :src="loginImg"
          style="width: 80px; height: 80px"
        ></el-image>
      </div>

      <!-- 登录标题 -->
      <h2 class="title">用户登录</h2>
      <!-- 登录表单 -->
      <el-form-item prop="username">
        <el-input
          placeholder="请输入学号"
          type="text"
          v-model="formContent.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          placeholder="请输入密码"
          type="password"
          v-model="formContent.password"
        ></el-input>
      </el-form-item>
      <div class="flex-container">
        <el-checkbox v-model="rememberAccount"
          >记住账号</el-checkbox
        >
        <el-link type="primary" @click="visitorLogin()"
          >游客登录</el-link
        >
      </div>
      <el-button
        type="primary"
        :underline="false"
        @click="submitForm('loginform')"
        >登录</el-button
      >
    </el-form>
    <div class="info-card">
      <loginCar></loginCar>
    </div>
  </div>
</template>
<script>
import Request from '@/utils/request'
import loginCar from '@/components/login/loginCar.vue'
export default {
  data() {
    let validateUsername = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入学号'))
      }
      if (value.length != 10) {
        callback(new Error('请输入正确的学号'))
      }
      //必须为数字
      if (!/^[0-9]+$/.test(value)) {
        callback(new Error('请输入正确的学号'))
      }
      callback()
    }
    let validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'))
      }
      if (value.length < 6) {
        callback(new Error('密码不能少于6位'))
      }
      callback()
    }
    return {
      rememberAccount: false,
      loginImg: require('@/assets/loginTitleImg.png'),
      formContent: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          {
            validator: validateUsername,
            trigger: 'blur'
          }
        ],
        password: [
          {
            validator: validatePassword,
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    submitForm(loginform) {
      this.$refs[loginform].validate((valid) => {
        if (valid) {
          // 调用登录接口，进行登录操作，成功后跳转到首页，失败则弹出提示框。
          Request.post('/user/login', this.formContent).then(
            (res) => {
              if (res.data.message == 'OK') {
                this.$message.success('登录成功')
                if (this.rememberAccount) {
                  localStorage.setItem(
                    'rememberedUsername',
                    this.formContent.username
                  )
                } else {
                  // 如果没有勾选记住账号，清除本地存储
                  localStorage.removeItem('rememberedUsername')
                }
                const token = res.headers.authorization

                // 登录成功后跳转到首页
                localStorage.setItem('token', token)
                this.$router.push('/')
              }
            }
          )
          //保存记住的账号
        } else {
          this.$message.error('登录失败，请检查登陆信息')
          return false
        }
      })
    },
    visitorLogin() {
      // 游客登录，直接跳转到首页
      this.$message.success('游客登录成功')
      localStorage.setItem('token', 'visitor')
      this.$router.push('/')
    }
  },
  mounted() {
    // 页面加载时，检查本地存储中是否有记住的账号，如果有则自动填充到表单中
    const rememberedUsername = localStorage.getItem(
      'rememberedUsername'
    )
    if (rememberedUsername) {
      this.formContent.username = rememberedUsername
      this.rememberAccount = true
    }
  },
  components: { loginCar }
}
</script>
<style scoped>
.container {
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  width: 700px;
  padding: 40px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 1);
}
.el-form-item {
  margin-bottom: 24px;
}
.el-button {
  width: 100%;
  margin-top: 12px;
}
.title {
  text-align: center;
  margin-bottom: 30px;
}
.imgContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-checkbox {
  margin-left: 12px;
}
.el-link {
  margin-right: 12px;
}
.info-card {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  padding: 20px;
  border-left: 1px solid #ccc;
}
.el-form {
  width: 250px;
  margin: 0 60px;
}
</style>
